<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>ChromeKeys Options</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="chromekeys.js"></script>
	<script type="text/javascript">
	function saveOptions(){
		localStorage["textarea-tabbing"] = $('#tab-behavior').val();		
		$('#save-status').html('Options have been saved').show('slow');
	}
	function loadOptions() {
		var o = localStorage["textarea-tabbing"];
		if (!o) {
			return;
		}
		
		$('#tab-behavior').val(o);
	}

	$(function(){
		
		$('#tab-behavior').append('<option value="'+ck_shift_to_movefocus+'">Shift+Tab Moves Focus</option>');
		$('#tab-behavior').append('<option value="'+ck_shift_to_tab+'">Shift+Tab Inserts Tab</option>');
		
		loadOptions();
		
		$('#apply').click(function(){
			saveOptions();
		});
	});	
	</script>
	
	<style>
	label {
		display:block;
		font-weight:bold;
	}
	#save-status {
		background-color:yellow;
		padding:3px;
		float:left;
		font-style:italic;
	}
	</style>
</head>
<body>
	<h1>ChromeKeys Options</h1>
	<label>Tab In TextArea Behavior:</label>
	<select name="tab-behavior" id="tab-behavior">
	</select>
	<hr/>
	
	<input type="button" id="apply" value="Apply Changes"/>
	<div style="clear:both"></div>
	<div id="save-status" style="display:none"></div>
</body>
</html>